import React, { memo, useRef, useState } from "react";
import { RegisterWrap } from "./style";
import { countryCode } from "@/services/countryCode";

export default memo(function Register(props) {
  const [push, setPush] = useState(false);
  const [code, setCode] = useState(86);
  const countryListRef = useRef();
  const chooseCode = (e) => {
    setCode(e.phone_code);
    countryListRef.current.style.display = "none";
    setPush(false);
  };
  const countryCodeFuc = () => {
    setPush(!push);
    if (!push) {
      countryListRef.current.style.display = "block";
    } else {
      countryListRef.current.style.display = "none";
    }
  };

  return (
    <RegisterWrap>
      <div>手机号：</div>
      <div className="country-code-phone">
        <div onClick={countryCodeFuc} className="country-code">
          +{code}
          <i className="icon-up-jt"></i>
        </div>
        <input className="phoneNumber" type="text" placeholder="请输入手机号" />
        <div ref={countryListRef} className="country-list">
          <ul>
            {countryCode.map((item, index) => {
              return (
                <li onClick={(e) => chooseCode(item)} key={item.country_code}>
                  <span>{item.chinese_name}</span>
                  <span>{item.phone_code}</span>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
      <div>密码：</div>
      <input
        className="zc-password-ipt"
        type="password"
        placeholder="设置登录密码，不少于8位"
      />
      <button className="goToNext">下一步</button>
      <div className="goBackLogin">
        <span onClick={props.zcToOtherWay}>返回登录</span>
      </div>
    </RegisterWrap>
  );
});
